<template>
    <div>
        <mt-swipe :auto="4000" class="mint-swipe">
            <mt-swipe-item v-for="item in swiperList" :key="item.id">
                <img :src="item.url" :alt="item.name"/>
            </mt-swipe-item>
        </mt-swipe>
    </div>
</template>

<script>
    export default {
        name: "Swiper",
        props: ['swiperList'],
        data() {
            return {

            }
        },
        created() {

        },
        mounted() {

        },
        methods: {

        }
    }
</script>

<style lang="scss" scoped>
    ul, li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    $color-white: #ffffff;
    $color-white-dark: #f7f7f7;
    $color-grey: #8e98a2;
    $color-red: #e1594b;
    $color-blue: #26a2ff;
    $color-blue-dark: #48658f;
    $color-black: black;

    // distance
    $padding-out: 0 0.5em;

    .mint-swipe {
        height: 9em;
        color: #fff;
        margin: 0.5em 0.5em 0 0.5em;
        .mint-swipe-items-wrap {
            .mint-swipe-item {
                text-align: center;
            }
        }
        img {
            width: 100%;
            height: 100%;
            border-radius: 0.3em;
        }
    }
</style>
